<!--
 * @Author: panghu chenjh@datamargin.com
 * @Date: 2024-04-03 15:36:47
 * @LastEditors: panghu chenjh@datamargin.com
 * @LastEditTime: 2024-05-03 17:41:13
 * @FilePath: \zheye\src\components\GlobalHeader.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <nav class="navbar navbar-dark bg-primary justify-content-between mb-4" data-bs-theme="dark">
    <div class="container-fluid">
      <a class="navbar-brand" href="#" @click="toHome">者也专栏</a>
      <ul v-if="!user.isLogin" class="list-inline mb-0">
        <li class="list-inline-item"><a href="#" class="btn btn-outline-light my-2" @click="toLogin">登陆</a></li>
        <li class="list-inline-item"><a href="#" class="btn btn-outline-light my-2" @click="toSignUp">注册</a></li>
      </ul>
      <ul v-else  class="list-inline mb-0">
        <li class="list-inline-item">
          <DropDown :title="user.nickName">
            <DropdownItem>
              <router-link to="/create"><a href="#" class="dropdown-item">新建文章</a></router-link>
            </DropdownItem>
            <DropdownItem disabled><a href="#" class="dropdown-item">编辑资料</a></DropdownItem>
            <DropdownItem><a href="#" class="dropdown-item" @click="logOut">退出登陆</a></DropdownItem>
          </DropDown>
      </li>
      </ul>
    </div>
  </nav>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue'
import { useRouter } from 'vue-router'
import DropDown from './Dropdown.vue'
import DropdownItem from './DropdownItem.vue'
import { UserProps } from '@/store'
import { useStore } from 'vuex'
export default defineComponent({
  name: 'BlobalHeader',
  components: { DropDown, DropdownItem },
  props: {
    user: {
      type: Object as PropType<UserProps>,
      required: true
    }
  },
  setup () {
    const router = useRouter()
    const store = useStore()
    const toHome = (e: Event) => {
      e.preventDefault()
      router.push('/')
    }
    const toLogin = (e: Event) => {
      e.preventDefault()
      router.push('/login')
    }
    const logOut = () => {
      store.commit('LOGOUT')
      router.push('/login')
    }
    const toSignUp = () => {
      router.push('/signUp')
    }
    return {
      toHome,
      toLogin,
      logOut,
      toSignUp
    }
  }
})
</script>

<style lang="scss" scoped>
.dropdown-item{
  color: #000;
}
.dropdown-item:focus, .dropdown-item:hover{
  color: #1462af;
  background-color: rgba(20, 98, 175, .5);
}
</style>
